Skip to content

Dev: Frontend monorepo setup#5228

Open
conbrad wants to merge 27 commits intomainfrom
task/web-monorepo-setup
Open

Dev: Frontend monorepo setup#5228
conbrad wants to merge 27 commits intomainfrom
task/web-monorepo-setup

Conversation

@conbrad
Copy link
Collaborator

@conbrad conbrad commented Mar 16, 2026

Splits the web/ directory into a Yarn 4 workspace with Turbo orchestration:

  • apps/wps-web — the main React/Vite app
  • packages/api — API client
  • packages/ui — shared UI components
  • packages/utils — shared utilities
  • packages/types — shared TypeScript declarations
  • packages/tsconfig — shared TypeScript base configs

This will help enable reuse of components across web and asago. Moving asago to the app package can happen later.

Test Links:

Landing Page
MoreCast
Percentile Calculator
C-Haines
FireCalc
FireCalc bookmark
Auto Spatial Advisory (ASA)
HFI Calculator
SFMS Insights
Fire Watch

@conbrad conbrad force-pushed the task/web-monorepo-setup branch from d30226c to 748d84b Compare March 16, 2026 20:33
@conbrad conbrad force-pushed the task/web-monorepo-setup branch from 5a7bd18 to 430670b Compare March 16, 2026 20:45
@codecov
Copy link

codecov bot commented Mar 16, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (main@0fea3e0). Learn more about missing BASE report.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #5228   +/-   ##
=======================================
  Coverage        ?   66.46%           
=======================================
  Files           ?      375           
  Lines           ?    16482           
  Branches        ?     1874           
=======================================
  Hits            ?    10954           
  Misses          ?     5015           
  Partials        ?      513           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@conbrad conbrad marked this pull request as ready for review March 16, 2026 20:59
@conbrad conbrad requested review from brettedw and dgboss March 16, 2026 20:59
Comment on lines 2 to 7
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know if there's more of these but these imports aren't resolving for me. I think because it's reaching into the features module. VScode import resolving doesn't seem to know what to do here either

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like a circular dependency, surprised it built. I guess I'll need to go through every file in vscode to check for this, or run a tool somehow.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I asked my free trial friend for a clearer explanation:

The app build uses web/apps/wps-web/tsconfig.app.json:8, which explicitly maps aliases like api/*, utils/*, and components/* straight to sibling source folders:
  - web/apps/wps-web/tsconfig.app.json:10
  - web/apps/wps-web/tsconfig.app.json:17
  - web/apps/wps-web/tsconfig.app.json:20

  and it includes those package source directories directly:

  - web/apps/wps-web/tsconfig.app.json:25

  So @wps/wps-web is effectively compiling:

  - its own src
  - packages/api/src
  - packages/ui/src
  - packages/utils/src
  - packages/types/src

  as one combined source tree.

  That is why yarn build works.

  Why root tsc -b tsconfig.json fails:

  - that command tries to typecheck the package projects as separate units
  - those package projects are not actually self-contained yet
  - so the monorepo graph fails even though the app graph passes

  Short version: the app builds because it is still “cheating” in a practical way by directly consuming raw source from the sibling folders, instead of consuming real
  isolated packages.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fixed this one here: 49bcfb1, will address the rest in a follow up commit(s).

@brettedw
Copy link
Collaborator

From the web root, npx tsc -b tsconfig.json reports a number of issues and fails because some of the packages still depend on app only code (features/*) and app test setup I think

"@types/react-is": "^19",
"@types/recharts": "^1.8.23",
"@vitejs/plugin-react": "^4.3.1",
"@wps/tsconfig": "workspace:*",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the only package that's actually installed as a package, so I think the repo still relies on relative imports rather than consuming packages as packages. Is that by design?

Does the turbo repo caching of packages work in a set up like this?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh good catch, yeah these should be installed as packages or turbo caching won't work.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in: 444b988 and 96597cd

Each package build just runs a type check without emitting,outputs: [] tells Turbo "there are no output files, but still cache the result of this task". So Turbo caches the exit code and considers the task successful on a cache hit, skipping the tsc --noEmit run entirely. The type-check won't re-run unless the inputs (source files) change.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aren't all the imports still relative though? To import from the api package wouldn't it need to be something like @wps/api/.... And in that case if they're actual packages don't they need to export something?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also curious about how vscode quick fix imports work in this case

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This turborepo example repo might be helpful? Not sure
https://github.com/vercel/turborepo/blob/main/examples/basic/packages/ui/package.json

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Check the latest now, packages are used and aliases are gone.

@@ -0,0 +1,33 @@
{
"$schema": "https://turbo.build/schema.json",
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see this in vscode, should this be a trusted domain? Is it necessary?

Unable to load schema from 'https://turbo.build/schema.json': Location https://turbo.build/schema.json is untrusted.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$schema is for editor tooling — VS Code uses it to validate keys like tasks, dependsOn, outputs etc. Whether to trust the domain is up to you. It's Turborepo's own schema URL, so it's not suspicious.

@sonarqubecloud
Copy link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants